<template>
    <el-scrollbar height="100%" style="overflow-y: hidden;"><!-- 使用el-scrollbar组件实现垂直滚动功能 -->
        <el-row type="flex" justify="center"
            style="align-content: center;height: 100%;margin-top: 2%"><!-- 创建布局，内容居中对齐，设置高度和顶部外边距 -->
            <el-form ref="ruleFormRef" style="width: 80%;" :model="ruleForm" :rules="rules" label-width="auto"
                :size="formSize" status-icon :label-position="labelPosition">
                <el-col :span="20"><!-- 设置表单容器宽度和验证规则等属性 -->
                    <el-form-item label="店铺名称"><!-- 输入店铺名称 -->
                        <el-input v-model="ruleForm.store_name" style="width: 100%" :rows="10" type="text" />
                    </el-form-item>
                    <el-col :span="12">
                        <!-- 店铺地址-->
                        <el-form-item label="地址">
                            <el-cascader size="large" :options="regionData" v-model="selectedOptions" :props="props"
                                @change="handleChange" style="width: 100%;">
                            </el-cascader>
                        </el-form-item>
                    </el-col>
                    <!-- 使用el-row组件创建一个灵活的布局，内容居中对齐，设置高度和顶部外边距 -->
                    <el-form-item label="店铺介绍">
                        <el-input v-model="ruleForm.introduce" style="width: 100%" :rows="5" type="textarea" />
                    </el-form-item>
                    <el-form-item>
                        <el-row style="width: 100%; align-content: center;margin-top: 5%;" justify="center">
                            <el-col :span="14">
                                <el-button style="background-color: #fbaf5a; color: white; width: 100%;height: 40px;"
                                    @click="submitForm">提交店铺申请</el-button>
                            </el-col>
                        </el-row>
                    </el-form-item>
                </el-col>
            </el-form>
        </el-row>
    </el-scrollbar>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref } from 'vue'
import { ComponentSize, FormInstance, FormRules } from 'element-plus'
import type { FormProps } from 'element-plus'
import { regionData, codeToText } from 'element-china-area-data';
import { userInfoStore } from '../assets/userStore/userStore'
import router from '../router'
import { KindModel } from '../assets/models/Kind';
import { StoreModel } from '../assets/models/Store';
import { kindApis } from '../assets/apis/KindApis';
import { storeApis } from '../assets/apis/StoreApis';


const userStore = userInfoStore();
let province = ref<string>()
let city = ref<string>()
let county = ref<string>()
let kinds = ref<Array<KindModel>>()

// 组件挂载时获取种类数据
onMounted(() => {
    kindApis.queryKind()
        .then((value: Array<KindModel>) => {
            kinds.value = value;
        })
})

//地址选择变化
const handleChange = () => {
    province.value = codeToText[selectedOptions.value[0]];
    let cityCode = selectedOptions.value[1];
    if (cityCode === 5002) {
        county.value = codeToText[selectedOptions.value[2]];
    } else if (cityCode === (5001 || 1201 || 1101 || 1001)) {
        city.value = codeToText[selectedOptions.value[1]];
    } else {
        city.value = codeToText[selectedOptions.value[1]];
        county.value = codeToText[selectedOptions.value[2]];
    }
    ruleForm.address = province.value + city.value + county.value;
}

const props = {
    expandTrigger: 'hover' as const,
}

// 声明选中的地址选项引用
let selectedOptions = ref()

// 表单标签位置、表单尺寸和表单实例引用
const labelPosition = ref<FormProps['labelPosition']>('top')
const formSize = ref<ComponentSize>('large')
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive<StoreModel>({
    store_name: '',
    introduce: '',
    user: userStore.id,
    address: ''
})

//创建商铺
const rules = reactive<FormRules<StoreModel>>({
    store_name: [
        {
            required: true,
            message: '请输入商铺名称',
            trigger: 'change'
        }
    ],
    introduce: [
        {
            required: true,
            message: '请输入商铺描述',
            trigger: 'change',
        },
    ],
    address: [
        {
            required: true,
            message: '请选择商铺所在地',
            trigger: 'change',
        },
    ]
})

//提交表单处理函数
const submitForm = () => {
    storeApis.applyStore(ruleForm)
        .then((value) => {
            if (value) {
                router.go(0);//刷新
            }
        })
}
</script>


<style scoped>
.avatar-uploader .avatar {
    /* 头像上传样式 */
    width: 178px;
    height: 178px;
    display: block;
}
</style>

<style>
.avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
}


.header_register {
    width: 100%;
    height: 90px;
    background-color: #fbaf5a;
    padding: 20px;
}
</style>